<template>
    <div class="icons">
            <swiper :options="swiperOption">
                    <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
            <div class="icon-img">
                <img class="icon-img-content" :src="item.imgUrl" alt="">
            </div>
            <p class="icon-desc">{{item.desc}}</p>
        </div>
                                </swiper-slide>
                                    </swiper>
    </div>
</template>

<script>
    export default {
        name: 'HomeIcons',
        props: {
            list: Array
        },
        data() {
            return {
                swiperOption: {
                    el: '.swiper-pagination',
                    autoplay: true
                }
            }
        },
        computed: {
            pages() {
                const pages = [];
                this.list.forEach((item, index) => {
                    const page = Math.floor(index / 8)
                    if (!pages[page]) {
                        pages[page] = []
                    }
                    pages[page].push(item)
                })
                return pages
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '~@/assets/style/varibles.scss';
    .icons>>>.swiper-container {
        height: 0;
        padding-bottom: 50%;
    }
    
    .icon {
        position: relative;
        width: 25%;
        height: 0;
        float: left;
        padding-bottom: 25%;
        overflow: hidden;
        .icon-img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: .44rem;
            box-sizing: border-box;
            padding: .1rem;
            .icon-img-content {
                display: block;
                margin: 0 auto;
                height: 100%;
            }
        }
        .icon-desc {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: .44rem;
            line-height: .44rem;
            text-align: center;
            color: $darkTextColor;
            @include ellipsis
        }
    }
</style>